<template>
    <view class="max-box">
        <view class="search" :style="{ width:searchWidth, height:searchHeight,background:searchBackground,borderRadius:borderRadius,border:border}">
            <view class="search_image">
                <image :src="`${baseUrl}/uploads/uniapp_image/staff/sousuo.png`"  mode="scaleToFill"/>
            </view>
            <view class="srarch_input">
                <up-input  :placeholder="placeholder"  border="surround"  v-model="srarch_value"  @change="change"></up-input>
            </view>
            <view  class="search_button" @tap="search">搜索</view>
        </view>
    </view>
</template>

<script setup>
    import sheep from '@/sheep';
    import { ref, reactive, unref } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import { baseUrl } from "@/sheep/config";
    const props = defineProps({
        // 宽度
        searchWidth:{
            type:String,
            default:'100%'
        },
        // 高度
        searchHeight:{
            type:String,
            default:'72rpx'
        },
        // 背景颜色
        searchBackground:{
            type:String,
            default:'#ffffff'
        },
        // 圆角
        borderRadius: {
            type:String,
            default:'36rpx'
        },
        // 未输入提示文字
        placeholder:{
            type:String,
            default:''
        },
        // 是否拥有边框
        border: {
            type:String,
            default:''
        }
})

    // 输入框的值
    const srarch_value = ref('')

    // 点击搜索触发方法 传入输入框的值
    const emits = defineEmits(['searchKeyWord']);
    const search = () => {
        emits('searchKeyWord',srarch_value.value)
    }

</script>

<style  lang="scss" scoped>
    .search {
        background-color: #FFFFFF;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
        display: flex;
        position: relative;
    }

    // 搜索图标
    .search_image {
        width: 74rpx;
        height: 74rpx;
        position: relative;
    }
    // 搜索输入框
    // .srarch_input {
        
    // }
    // 搜索按钮
    .search_button {
        width: 150rpx;
        height: 60rpx;
        border-radius: 32rpx;
        background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
        font-family: PingFangSC;
        color: #FFFFFF;
        font-weight: 500;
        font-size: 30rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
        line-height: 60rpx;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 6rpx;
        margin: auto;
    }

    image {
        width: 30rpx;
        height: 30rpx;
        position: absolute;
        top: 0;
        left: 50%;
        right: 0;
        bottom: 0;
        margin: auto;
    }


</style>